<template>
  <div class="styleSoltBox">
    <div class="content">
      <slot name="content">
      </slot>
    </div>
    <div class="edit">
      <div class="title">编辑样式</div>
      <div class="editContent">
        <slot name="edit">
        </slot>
      </div>
      <div class="moreBtn">
        <el-button size="mini" @click="cancelFun">取消</el-button>
        <el-button v-if="isShowSaveAs" type="primary" size="mini" @click.stop="saveAsFun">另存为</el-button>
        <el-button type="primary" size="mini" @click.stop="saveFun">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'styleSolt'
})
export default class StyleSolt extends Vue {
  @Prop({ type: Boolean, default: () => false }) private isShowSaveAs // 是否展示另存为
  private saveFun () {
    this.$emit('saveFun')
  }

  private saveAsFun () { // 保存
    (this as any).$bus.$emit('saveAsFun')
  }

  private cancelFun () { // 取消
    (this as any).$bus.$emit('styleCancelFun')
  }
}
</script>
<style lang="stylus" scoped>
  .styleSoltBox
    overflow hidden
    height 100%
    clear both
    .content
      float left
      width calc(100% - 327px)
      height 100%
      background-color #fff
      border 1px solid #E6EAED
      height 100%
      border-radius 8px
    .edit
      float right
      width 300px
      height 100%
      border-radius 4px
      background-color #fff
      border 1px solid #E6EAED
      padding 23px 0px 23px 20px
      position relative
      .editContent
        height calc(100% - 60px)
        padding-right 16px
        overflow auto
      .title
        font-size 14px
        margin-bottom 24px
      .moreBtn
        background-color #fff
        position absolute
        bottom 0
        right 10px
        width 96%
        height 60px
        line-height 60px
        text-align right
</style>
